<template>
  <div class="grid">
    <a-row>
      <a-col :span="24">
        <div class="odd">
          100%
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <div class="odd">
          50%
        </div>
      </a-col>
      <a-col :span="12">
        <div class="even">
          50%
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8">
        <div class="odd">
          33.33%
        </div>
      </a-col>
      <a-col :span="8">
        <div class="even">
          33.33%
        </div>
      </a-col>
      <a-col :span="8">
        <div class="odd">
          33.33%
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="6">
        <div class="odd">
          25%
        </div>
      </a-col>
      <a-col :span="6">
        <div class="even">
          25%
        </div>
      </a-col>
      <a-col :span="6">
        <div class="odd">
          25%
        </div>
      </a-col>
      <a-col :span="6">
        <div class="even">
          25%
        </div>
      </a-col>
    </a-row>
    <h1>概述</h1>
    <div>布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：</div>
    <div>
      <div>1.通过`row`在水平方向建立一组`column`（简写 col）</div>
      <div>2.你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素</div>
      <div>3.栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。</div>
      <div>4.如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列</div>
    </div>
  </div>
</template>

<script setup lang='ts'>
</script>

<style scoped lang="less">
h1 {
  font-size: 30px;
  font-weight: 600;
}

div {
  line-height: 22px;
}

.grid {
  padding: 50px;
}

.odd {
  height: 50px;
  margin-bottom: 20px;
  background-color: rgb(0 82 217 / 100%);
  color: #fff;
  line-height: 50px;
  text-align: center;
}

.even {
  height: 50px;
  margin-bottom: 20px;
  background-color: #1677ffbf;
  color: #fff;
  line-height: 50px;
  text-align: center;
}
</style>
